<template>
	<view>
		<!-- 顶部导航 -->
		<view class="topTabBar" :style="{position:headerPosition,top:headerTop}">
			<view class="grid" v-for="(grid,tbIndex) in orderType" :key="tbIndex" @tap="showType(tbIndex)">
				<view class="text" :class="[tbIndex==tabbarIndex?'on':'']">{{grid}}</view>
			</view>
		</view>
		<!-- 考虑非APP端长列表和复杂的DOM使用scroll-view会卡顿，所以漂浮顶部选项卡使用page本身的滑动 -->
		<view class="order-list">
			<view class="list">
				<view class="onorder" v-if="!list">
					<image src="../../../static/img/noorder.png"></image>
					<view class="text">
						没有相关订单
					</view>
				</view>
				<view class="row" v-for="(row,index) in list" :key="index">
					<view class="top">
						<view class="left">
							<view class="name">
								{{row.name}}
							</view>
						</view>
						<view class="right">
							<view class="type">{{typeText[row.type]}}</view>
						</view>
					</view>

					<view class="order-info">
						<view class="left">
							<image :src="row.img"></image>
						</view>
						<view class="right">
                           
							<view class="price" v-if="row.price>0">实付：{{row.price}}</view>
							<view class="price" v-if="row.price==0">免费</view>
							<view class="date">下单时间：{{row.date}}</view>
							 <view class="date">订单号：{{row.ordersn}}</view>
							<view class="price-number">

							</view>
						</view>

					</view>
					<view class="btns">
						<block v-if="row.type=='unuse'&&row.price>0">
							<view class="default" @tap="cancelOrder(row)">退款</view>
						</block>

						<block >
							<view v-if="row.zq_ids!='null'" class="default" @tap="toMyQRZQ(row)">查看赠券
							
							</view>
							<view v-if="row.type=='unuse'" class="default" @tap="toMyQR(row)">查看优惠券<image class="qrcode_icon"
									src="../../../static/img/copoun/qrcode_icon.png"></image>
							</view>
							
						</block>
						<block v-if="row.hx_time!='null'&&row.tk_time=='null'&&row.type=='isuse'" >
							 <view class="date">核销时间：{{row.hx_time}}</view>
						</block>
						<block v-if="row.tk_time!='null'&&row.type=='refunds_finsh'" >
							 <view class="date">退款时间：{{row.tk_time}}</view>
						</block>
						<!-- <block v-if="row.type=='refunds'"><view class="default">查看进度</view></block> -->
					</view>
					

				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				headerPosition: "fixed",
				headerTop: "0px",
				typeText: {
					unuse: '未核销',
					isuse: '已核销',
					refunds: '退款',
					refunds_ing: '待退款',
					refunds_finsh: '已退款',
					refunds_cancel: '取消退款'

				},
				orderType: ['全部', '未核销', '已核销', '退款'],
				//订单列表 演示数据
				orderList: [


				],
				list: [],
				tabbarIndex: 0,
				backpage: '../../login/login?backpage=' + '../pages/index/index',
				token:''
			};
		},
		onLoad(option) {
			//option为object类型，会序列化上个页面传递的参数
			// console.log("option: " + JSON.stringify(option));

			let tbIndex = option.tbIndex == null ? 0 : parseInt(option.tbIndex) + 1;
			this.list = this.orderList[tbIndex];
			this.tabbarIndex = tbIndex;

			//兼容H5下排序栏位置
			// #ifdef H5
			let Timer = setInterval(() => {
				let uniHead = document.getElementsByTagName('uni-page-head');
				if (uniHead.length > 0) {
					this.headerTop = uniHead[0].offsetHeight + 'px';
					clearInterval(Timer); //清除定时器
				}
			}, 1);
			// #endif
			//获取列表数据
			//this.getdata();
		},
		onShow(){
			this.getdata();
		},
		onPageScroll(e) {
			return;
			//兼容iOS端下拉时顶部漂移
			this.headerPosition = e.scrollTop >= 0 ? "fixed" : "absolute";
		},
		methods: {
			showType(tbIndex) {
				this.tabbarIndex = tbIndex;
				this.list = this.orderList[tbIndex];
			},
			showLogistics(row) {

			},
			remindDeliver(row) {
				uni.showToast({
					title: '已提醒商家发货'
				})
			},
			cancelOrder(row) {
				uni.showModal({
					title: '申请退款',
					content: '确定申请退款？',
					success: (res) => {
						if (res.confirm) {
							console.log('用户点击确定');
							this.doCancelOrder(row.id);
						} else if (res.cancel) {
							uni.showToast({
								title: "取消退款",
								icon: "none"
							});
							//console.log('用户点击取消');
						}
					}
				});
			},
			doCancelOrder(id) {
				//申请退款
				//const token = uni.getStorageSync("token");
				let token = uni.getStorageSync("token_h5")
				uni.request({
					url: "https://bg.jswbgz.com/post/tk_copoun_order:user_tk	", //
					data: {
						order_id: id,
						token: token

					},
					header: {
						'Content-Type': 'application/x-www-form-urlencoded'
					},
					dataType: 'json',
					method: 'post',
					success: (res) => {
						uni.hideLoading()
						console.log(res.data.data)
						this.testurl = res;
						if(res.data.success)
						{
							if (res.data.data.code == 1 ) {
								uni.showToast({
									title: res.data.data.msg,
									icon: "none"
								});
								let typeNum = this.orderList.length;
								for (let i = 0; i < typeNum; i++) {
									let list = this.orderList[i];
									let orderNum = list.length;
									if (orderNum > 0 && list[0].type == 'unuse') {
										for (let j = 0; j < orderNum; j++) {
											if (this.orderList[i][j].id == id) {
												this.orderList[i][j].type = 'refunds_ing';
												this.orderList[typeNum].push(this.orderList[i][j])
												break;
											}
										}
									
									}
									
							
								}
							}
						}
						 else if (res.data.msg == "登录已失效，请重新登录") {
							uni.removeStorage({
								key: 'UserList',
								success: function(res) {
									this.$logout();
								}
							});
						} else {
							uni.showToast({
								title: res.data.data.msg,
								icon: "none"
							});
						}

					},
					fail: (res) => {
						uni.showToast({
							title: "生成订单失败",
							icon: "none"
						});
						//console.log(res)
					}
				});

			},
			toPayment(row) {
				//本地模拟订单提交UI效果
				uni.showLoading({
					title: '正在获取订单...'
				})
				let paymentOrder = [];
				paymentOrder.push(row);
				setTimeout(() => {
					uni.setStorage({
						key: 'paymentOrder',
						data: paymentOrder,
						success: () => {
							uni.hideLoading();
							uni.navigateTo({
								url: '../../pay/payment/payment?amount=' + row.payment
							})
						}
					})
				}, 500)
			},
			toMyQR(e) {
				uni.navigateTo({
					url: '../myQR/myQR?id=' + e.id + ''
				})
			},
			toMyQRZQ(e) {
				uni.navigateTo({
					url: '../myQR/QR_list?id=' + e.id + '&type=zq'
				})
			},
			getdata() {

				let token = uni.getStorageSync("token_h5");
				uni.showLoading({
						title: '加载中...'
					})
					uni.request({
						url: "https://bg.jswbgz.com/post/copoun_order:select_user_order", //仅为示例，并非真实接口地址。
						data: {
							token: token
						},
						header: {
							'Content-Type': 'application/x-www-form-urlencoded'
						},
						dataType: 'json',
						method: 'post',
						success: (res) => {
							uni.hideLoading()
							//console.log(res.data.data)
							let orderlist = [];
							let list = []; //全部
							let list1 = []; //未核销
							let list2 = []; //已核销
							let list3 = []; //退款
				            if(res.data.success){
								if (res.data.data != false ) {
									// console.log(res)
									res.data.data.forEach((item, index) => {
										//类型
										let type = '';
										switch (item.is_tk) {
											case "未退款":
												if (item.is_hx == "未核销") {
													type = 'unuse';
												}
												if (item.is_hx == "已核销") {
													type = 'isuse';
												}
												break;
											case "待退款":
												type = 'refunds_ing'
												break;
											case "已退款":
												type = 'refunds_finsh'
												break;
											case "已退过款":
												type = 'refunds_finsh'
											break;
											case "取消退款":
												type = 'refunds_cancel'
												break;
											default:
												break;
										}
								 	let img = item.img_url; //图片
										let id = item.id; //订单ID
										let item_name = item.item_name; //名称
										let total_fee = item.total_fee; //价格
										let create_time = item.create_time; //创建时间
										let order_no = item.order_no; //创建时间
										let hx_time = item.hx_time; //创建时间
										let tk_time = item.tk_time; //创建时间
										let zq_ids = item.zq_ids; //创建时间
										let _jlist =`{ "type":"${type}","ordersn":"${order_no}","id": ${id}, "img": "${img}", "name": "${item_name}", "price": "${total_fee}","payment":"${total_fee}","date":"${create_time}","hx_time":"${hx_time}","tk_time":"${tk_time}","zq_ids":"${zq_ids}"}`
										_jlist = JSON.parse(_jlist);
										list.push(_jlist)
										if (item.is_hx == "未核销"&&item.is_tk == "未退款") {
											list1.push(_jlist);
										}
										if (item.is_hx == "已核销"&&item.is_tk == "未退款") {
											list2.push(_jlist);
										}
										if (item.is_tk != "未退款") {
								
											list3.push(_jlist);
										}
										//console.log(this.swiperList)
									})
									orderlist = [list, list1, list2, list3]
									this.$nextTick(() => {
										this.orderList = orderlist;
										this.list = this.orderList[this.tabbarIndex];
										//console.log(this.orderList)
									})
								}
								else {
								uni.showToast({
									title: "该用户还没有提交订单",
									icon: "none"
								});
								}
							}
							 else if (res.data.msg == "登录已失效，请重新登录") {
								this.$logout();
							} else {
								uni.showToast({
									title: res.data.msg,
									icon: "none"
								});
							}
				
						},
						fail: (res) => {
							uni.showToast({
								title: "数据加载失败",
								icon: "none"
							});
							console.log(res)
						}
					});
				

			}

		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f3f3f3;
	}

	.topTabBar {
		width: 100%;
		position: fixed;
		top: 0;
		z-index: 10;
		background-color: #f8f8f8;
		height: 80upx;
		display: flex;
		justify-content: space-around;
	
	.grid {
			width: 20%;
			height: 80upx;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #444;
			font-size: 28upx;

			.text {
				height: 76upx;
				display: flex;
				align-items: center;

				&.on {
					color: #f06c7a;
					border-bottom: solid 4upx #f06c7a;
				}
			}

		}
	}

	.order-list {
		margin-top: 80upx;
		padding-top: 20upx;
		width: 100%;

		.list {
			width: 94%;
			margin: 0 auto;

			.onorder {
				width: 100%;
				height: 50vw;
				display: flex;
				justify-content: center;
				align-content: center;
				flex-wrap: wrap;

				image {
					width: 20vw;
					height: 20vw;
					border-radius: 100%;
				}

				.text {
					width: 100%;
					height: 60upx;
					font-size: 28upx;
					color: #444;
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}

			.row {
				width: calc(100% - 40upx);
				padding: 20upx;
				border-radius: 10upx;
				background-color: #fff;
				margin-bottom: 50upx;
				box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.3);

				.top {
					height: 70upx;

					.left {
						width: 70%;
						float: left;

						.name {
							width: 100%;
							font-size: 28upx;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 2;
							overflow: hidden;
							font-size: 14px;
							letter-spacing: 0em;
							color: #3D3D3D;
							padding-top: 5px;
						}
					}

					.right {
						width: 28%;
						float: right;

						.type {
							font-size: 18px;
							font-weight: 300;
							letter-spacing: 0em;
							color: #FFAA00;
							text-align: right;
						}
					}
				}

				.order-info {
					width: 100%;
					display: flex;

					.left {
						flex-shrink: 0;
						width: 25vw;
						height: 20vw;

						image {
							width: 25vw;
							height: 20vw;
							border-radius: 10upx;
						}
					}

					.right {
						width: 100%;
						margin-left: 40upx;
						position: relative;

						.date {
							font-size: 22upx;
							font-weight: 400;
							letter-spacing: 0em;
							color: #3D3D3D;
							margin-bottom: 5px;
						}

						.price {
							font-size: 35upx;
							margin-bottom: 10upx;
							color: #3D3D3D;
						}


					}
				}

				.detail {
					display: flex;
					justify-content: flex-end;
					align-items: flex-end;
					height: 60upx;
					font-size: 26upx;

					.sum {
						padding: 0 8upx;
						display: flex;
						align-items: flex-end;

					}

				}

				.btns {
					height: 80upx;
					display: flex;
					align-items: center;
					justify-content: flex-end;
					margin-top: 10px;
					border-top: 1px solid #D8D8D8;
					padding-top: 5px;

					view {
						min-width: 120upx;
						height: 50upx;
						padding: 0 20upx;
						border-radius: 50upx;
						display: flex;
						justify-content: center;
						align-items: center;
						font-size: 28upx;
						margin-left: 20upx;
					}

					.default {
						border: solid 1upx #ccc;
						color: #666;

						.qrcode_icon {
							width: 14px;
							height: 14px;
							padding-left: 5px;
						}
					}

					.pay {
						border: solid 1upx #ec652f;
						color: #ec652f;
					}
				}
			}
		}
	}
</style>
